<!doctype html> 
<html lang="zh_CN">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="./fonts/boostrapicons/bootstrap-icons.css">
    <title>轮播</title>
  </head>
  <body>
    <div id="haoren" class="carousel slide" data-ride="carousel" data-interval="2000">
        <ol class="carousel-indicators">
            <li data-target="#haoren" data-slide-to="0" class="active"></li>
            <li data-target="#haoren" data-slide-to="1"></li>
            <li data-target="#haoren" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="holder.js/100px400?text=img1" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="holder.js/100px400?text=img2" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="holder.js/100px400?text=img3" class="d-block w-100" alt="...">
          </div>
        </div>
        <a class="carousel-control-prev" href="#haoren" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#haoren" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./js/plugins/bootstrap/jquery.slim.min.js" ></script>
    <script src="./js/plugins/bootstrap/popper.min.js"></script>
    <script src="./js/plugins/bootstrap/bootstrap.min.js"></script>
    <script src="./js/plugins/holder/holder.js"></script>
    <script>
      $(function(){
        $('.carousel').carousel({
           interval: 2000
        })
      })
    </script>
  </body>
</html>